<template>
  <div class="html">
    <a-row justify="left" align="top" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
        <a-col :xs="24" :sm="24" :md="12" :xl="12" v-for="(item,index) in dataList" :key="index" flex>
            <Card :data="item"></Card>
        </a-col>
    </a-row>
    <div class="loading">
        <a class="data" v-show="loading" href="#" @click.prevent="getMore">加载更多</a>
        <a class="noData" v-show="!loading" href="#" @click.prevent="0">暂时没有了/(ㄒoㄒ)/~~</a>
    </div>
  </div>
</template>

<script>
import Card from '@/components/Card'
import {headerHeight} from '@/hooks/useHeader'
import {reactive, toRefs, getCurrentInstance} from 'vue'
export default {
  setup(props){
    headerHeight()
    const {proxy} = getCurrentInstance()

    let data = reactive({
      dataList:[],
      key:'',
      sort:''
    })

    let methods = reactive({
      getFrontEndData(){
        proxy.$api.getFrontEndData('html','asc').then((res)=>{
          if(res.code == 200){
            data.dataList = res.data
          }
        })
      }
    })

    methods.getFrontEndData()

    return {
      ...toRefs(data)
    }
  },
  components:{ Card }
}
</script>

<style lang="less" scoped>

.html{
  padding-top: 80px;
}
</style>